<!--
 * @Descripttion: 
 * @version: 
 * @Author: xcb
 * @Date: 2021-03-16 09:48:46
 * @LastEditors: OBKoro1
 * @LastEditTime: 2023-02-17 10:41:31
-->
<template>
  <el-row style="height: 100%">
    <el-col :span="2">
      <el-select v-if="planDataMsgForm.selectReservoir != '长江中下游'" style="width: 100%" v-model="selectSectionMsno"
        @change="sectionDataInit">
        <el-option v-for="(item, i) in selectMsnoArrData" :key="i" :value="item" :label="item"></el-option>
      </el-select>
      <a-tree v-model:selectedKeys="treeSelectData" :tree-data="sectionTreeData" :fieldNames="{
        children: 'children',
        title: 'key',
        key: 'key',
      }" @select="treeChange" />
    </el-col>

    <el-col :span="22" style="height: 100%">
      <SectionEcharts :sectionDataList="sectionDataList[selectRiverData.key]" :selectRiverData="selectRiverData" />
    </el-col>
  </el-row>
</template>

<script lang="ts">
import {
  ref,
  defineComponent,
  reactive,
  provide,
  inject,
  watch,
  toRefs,
  onMounted,
  getCurrentInstance,
} from "vue";
import { useRoute, useRouter } from "vue-router";

import {
  // 根据库区获取测次
  getSectionMsno,
  getSelectSections,
  getSelectAreaRiverList,

  // 长江中下游api
  getCjSectionInfo, // 获取里程和断面数据
  getCJMainStreamInfo,
} from "@/request/api";

import SectionEcharts from "./sectionEcharts.vue";

export default defineComponent({
  name: "channelSection",
  components: { SectionEcharts },
  setup: (props) => {
    const route: any = useRoute();
    const { proxy }: any = getCurrentInstance();

    const state = reactive({
      // 河道树状数据
      sectionTreeData: [],
      // 树状图所选河道
      treeSelectData: [],
      // 所选河道对象
      selectRiverData: {
        key: "",
        title: "",
        type: "",
      },

      // 所有河道断面数据
      sectionDataList: {},

      // 参数方案信息
      planDataMsgForm: {
        selectReservoir: "", // 库区
      },

      // 测次数组
      selectMsnoArrData: [],
    });

    // 所选河道断面测次
    // let selectSectionMsno: any = inject("selectSectionMsno");
    let selectSectionMsno: any = ref("默认")

    onMounted(() => {
      state.planDataMsgForm.selectReservoir = route.params.reservoir;
      
      if (state.planDataMsgForm.selectReservoir != "长江中下游") {
        getSectionData();
      } else {
        getCjSectionData();
      }

      // 断面测次获取
      getSectionMsno({
        area: state.planDataMsgForm.selectReservoir,
      }).then((res: any) => {
        const msnoArr = res.data.map((item) => item.msno);

        state.selectMsnoArrData = msnoArr;
      });
    });

    /**
     * @description: 初始化河道断面数据
     * @return {*}
     */
    function sectionDataInit(val: any) {
      console.log(selectSectionMsno);
      
      selectSectionMsno.value = val
      if (state.planDataMsgForm.selectReservoir != "长江中下游") {
        getSectionData();
      } else {
        getCjSectionData();
      }
    }

    /**
     * @description: 获取长江河道断面数据
     * @return {*}
     */
    async function getCjSectionData() {
      // 获取断面数据
      await getCjSectionInfo({
        planno: "默认方案",
        dirName: "默认方案",
      }).then((res: any) => {
        if (res.code === 200) {
          state.sectionDataList = res.data;
        }
      });

      // 获取断面树状图数据
      await getCJMainStreamInfo({}).then((res: any) => {
        //TODO 洞庭湖区文件目前存在问题 等待修改后去除filter
        state.sectionTreeData = res.data.filter(
          (item) => item.key != "洞庭湖区和四水尾闾"
        );

        // 树状图默认选中第一项
        state.treeSelectData = [res.data[0].key];

        // 直接调用树状图切换事件触发糙率获取以及选中河道对象赋值
        treeChange(state.treeSelectData);
      });
    }

    /**
     * @description: 获取非长江河道树状图数据，断面数据
     * 非长江河道断面信息(三峡,上游四库,两坝间及向家坝至朱沱)
     * @return {*}
     */
    async function getSectionData() {
      // 获取断面数据
      await getSelectSections({
        area: state.planDataMsgForm.selectReservoir,
        msno: selectSectionMsno.value,
      }).then((res: any) => {
        if (res.code === 200) {
          state.sectionDataList = res.data;
        }
      });

      // 获取断面树状图数据
      await getSelectAreaRiverList({
        area: state.planDataMsgForm.selectReservoir,
        msno: selectSectionMsno.value,
      }).then((res: any) => {
        state.sectionTreeData = res.data;

        // 树状图默认选中第一项
        state.treeSelectData = [res.data[0].key];

        // 直接调用树状图切换事件触发糙率获取以及选中河道对象赋值
        treeChange(state.treeSelectData);
      });
    }

    /**
     * @description: 河道树状图点击切换
     * @param {*} checkedKeys 所选中的河道数组
     * @return {*}
     */
    function treeChange(checkedKeys) {
      if (checkedKeys.length != 0) {
        const treeData: any = state.sectionTreeData.find(
          (item: any) => item.key === checkedKeys[0]
        );

        state.selectRiverData = treeData;
      } else {
        state.treeSelectData = [state.selectRiverData.key];
      }
    }

    return {
      ...toRefs(state),

      selectSectionMsno,

      sectionDataInit,
      treeChange,
    };
  },
});
</script>

<style scoped lang="less"></style>
